/*
  学习目标：useEffect-模拟卸载时
  语法： 
    useEffect(() => {

      return () => {
        // return的函数就是卸载时会自动执行的钩子函数

      }

    }, [])
*/
import React, { useState } from 'react';
import { useEffect } from 'react';

export default function App() {
  // 准备组件的显示与隐藏
  const [isShow, setIsShow] = useState(true);
  return (
    <div>
      {isShow && <Child />}
      <button onClick={() => setIsShow(!isShow)}>点击卸载子组件</button>
    </div>
  );
}

function Child() {
  // 👍 按逻辑，将同一个逻辑的挂载和卸载写到一个useEffect中
  // 👍 一个useEffect只维护一个逻辑， 多个逻辑分到多个useEffect中维护
  useEffect(() => {
    const timerId = window.setTimeout(() => {
      console.log('一秒时间到，爆炸');
    }, 1000);

    return () => {
      window.clearTimeout(timerId);
    };
  }, []);

  useEffect(() => {
    const fn = () => {
      console.log('浏览器窗口被调整了');
    };
    window.addEventListener('resize', fn);

    return () => {
      window.removeEventListener('resize', fn);
    };
  }, []);

  return <div>我是子组件</div>;
}
